<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="app" >
    <input v-model="name"/>
    <div>
        你输入了{{name}}
    </div>
    <hr>
    <input type="radio" name="sex" value="male" v-model="sex"> 男性
    <input type="radio" name="sex" value="female" v-model="sex"> 女性
    <div>
        你选择了{{sex}}
    </div>
    <hr>
    <div>
        <select name="xueli" v-model="xueli">
            <option value="chuzhong">初中</option>
            <option value="gaozhong">高中</option>
            <option value="daxue">大学</option>
            <option value="shuoshi">硕士</option>
        </select>
    </div>
    <div>
        你选择了{{xueli}}
    </div>
    <hr>
    <input type="checkbox"  v-model="ischecked" />是否选中<br/>
    单选框：{{ischecked}}
    <hr>
    <input type="checkbox"  v-model="language"  value="Java" />Java<br/>
    <input type="checkbox"  v-model="language" value="PHP" />PHP<br/>
    <input type="checkbox"  v-model="language" value="GO" />GO<br/>
    <div>
        多选框：{{language}}
    </div>

</div>

<script src="../js/vue.js"></script>
<!--js  vue 数据模型层 -->
<script>

    var vue = new Vue({
        el:"#app",
        data:{
            name:"xiaoli",
            sex:"male",
            xueli:"shuoshi",
            language: [],//   对于多选框 我们用数组array来接受多个选项值！
            ischecked: true //   对于一个选项框： boolean 来定义
        }
    })

</script>
</body>
</html>